import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {Button,Text ,StatusBar, View} from 'react-native';
import HomeScreen from './Home';
import MineScreen from './Mine';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import FontistoIcon from 'react-native-vector-icons/Fontisto';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import SwiperComponent from './demo_swiper'
import { LinearProgress } from 'react-native-elements';
import { connect } from 'react-redux'; 
// AntDesign:home
// MaterialCommunityIcons:panda
// AntDesign:message1
// Fontisto:person
const Tab = createBottomTabNavigator();

class Index extends React.Component {
    render() {
        return (

        
        <React.Fragment>
            { this.props.isLoading && <LinearProgress color="primary"  />}
            <StatusBar hidden={false} backgroundColor="#f8cf39"></StatusBar>
            <NavigationContainer>
                <Tab.Navigator  
                screenOptions={({ route }) => ({
                    tabBarLabel:({ focused, color, size }) => {
                        let text = ''
                        let defineColor = focused ? '#f44d3b':'#47464b'
                        switch(route.name) {
                            case 'Home':
                                text = '首页';
                                break;
                            case 'Mine':
                                text = '我的';
                                break;
                            case 'Message':
                                text = '消息'
                                break;
                            case 'Shop':
                                text = '电商'
                                break;
                        }
                        return <Text style={{color:defineColor}}>{text}</Text>
                    },
                    tabBarIcon: ({ focused, color, size }) => {
                    // 需求1: 根据不同的名称设置不同的图标
                    let defineColor = focused ? '#f44d3b':'#47464b'
                    let Component;
                    switch(route.name) {
                        case 'Home':
                            Component = <AntDesignIcon name="home" color={defineColor} size={20}></AntDesignIcon>
                            break;
                        case 'Mine':
                            Component = <FontistoIcon name="person" color={defineColor} size={20}></FontistoIcon>
                            break;
                        case 'Message':
                            Component = <AntDesignIcon name="message1" color={defineColor} size={20}></AntDesignIcon>
                            break;
                        case 'Shop':
                            Component = <MaterialCommunityIcon name="panda" color={defineColor} size={20}></MaterialCommunityIcon>
                            break;
                        }
                    //  You can return any component that you like here!
                        return Component; // <MaterialCommunityIcon
                },
            })}
            tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
            }}> 
                    <Tab.Screen name="Home" component={HomeScreen} />
                    <Tab.Screen name="Shop" component={MineScreen} />
                    <Tab.Screen name="Message" component={SwiperComponent} />
                    <Tab.Screen name="Mine" component={MineScreen} />
                </Tab.Navigator>
            </NavigationContainer>
        </React.Fragment>
        )
    }
}

export default connect(/*get*/(state)=>{
    // 指定要获取state中的啥  未来从this.props中直接拿
    return {
        isLoading:state.isLoading
    }
},/*set*/(dispatch)=>{
    return {// this.props.change(); => dispatch
        change:(param)=>{
            dispatch({
                type:'changeLoadingBySelf',
                payload:{
                    isloading:true
                }
            })
        }
    }
})(Index);